/* 入口函数 */
$(function () {
    /* 初始化 */
    init();
    function init() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    height: 50,//可选,默认50.触发下拉刷新拖动距离,
                    auto: true,//可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback: function () {
                        queryCart(function (result) {
                            /* 写完模板，就调用模板 */
                            var html = template("lt_tl", { data: result });
                            $("#OA_task_2").html(html);
                        })
                        mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
                    }
                }
            }
        });

        /*绑定复选框点击事件  */
        $("#OA_task_2").on("change",".cl_check",function () {
            /* 获取复选框元素 */
            /* console.log(123);在jq里面需要添加选择器上去 */
            var checkList = $("#OA_task_2 .cl_check:checked");
            /* console.log(checkList); */
            /* 循环得到每一个复选框，因为有多个，所以需要用到循环 */
            var ltzonge = 0;
            for (var i = 0; i < checkList.length; i++) {
                /* 根据复选框里面的每一项找到父元素，因为父元素li也是一个
                数组，所以得到里面的一项，获取自定义属性的值 */
             var jsonobj  = $(checkList[i]).parents(".mui-table-view-cell")[0].dataset.obj;
               /*  console.log(jsonobj); */
               /* 因为浏览器是以对象形式输出，所以需要转换成对象 */
               var obj = JSON.parse(jsonobj);
              /*  console.log(obj); */
              /* 获取单个价格 */
              var price =obj.price;
              /* 获取购买的数量的值 */
              var num = obj.num;

              ltzonge+=price*num;
            }
            /* 把总额写到span标签上 */
            $(".lt_dingd").html("订单总额:￥" + ltzonge +"");
        })

/* 删除单个商品，委托 */
        $("#OA_task_2").on("tap",".deleteBtn",function () {
          /*   console.log(123); */
          /* 这里嵌套两层function，所以需要先把this保存起来 */
          var that =this;
          mui.confirm("确定删除吗？","警告",["是","否"],function (a) {

            if (a.index==0) {
                /* 获取id，根据id到服务端进行删除 */
                var jsonobj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
                /* 因为浏览器是以对象形式输出，所以需要把json字符串转换成对象 */
                var obj = JSON.parse(jsonobj);
                /* 获取对象里面的id */
                var id = obj.id;
             /*  console.log(id); */
             /* 发送请求 */
            }else if(a.index==1){
                /* 留在原来的页面，不干什么事情 */
            }
            
             $.ltAjax({
                 url:"/cart/deleteCart",
                 data:{id:[id]},
                 success:function (result) {
                     console.log(result);
                     mui("#refreshContainer").pullRefresh().pulldownLoading();
                 }
             })
            })
        })

        /* 编辑商品，委托 */
         // 编辑商品
    /* 
    编辑商品:
    1 绑定事件
    2 获取被点击的商品的 尺码 选择的数量 id 
    3 动态渲染数据- 在mui-confirm里面渲染的
    4 把选择中的参数 发送到后台
    5 编辑成功->手动触发下拉刷新

     */
        $("#OA_task_2").on("tap",".editBtn",function () {
            /* 获取被点击的商品的尺码，选择的数量 id */
            var that =this;
           /*  console.log(this); */
            var jsonobj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
           /*  console.log(jsonobj); */
           /* 转换成对象 */
           var obj = JSON.parse(jsonobj);
          
           /* 调用我们之前封装好的jq方法，把尺码切割成数组的形式 */
           obj.sizeArr = $.sizeFormat(obj.productSize);
       /*  console.log(obj);   */
        
           var html = template("bj_tl",obj);
            /* console.log(obj); */
            /* 使用组件*/
           // 因为mui.confirm 会把空格或者回车直接渲染成 br标签  所以我们最好提前把空格或者回车处理掉 
           //  替换掉所有的回车
           html = html.replace(/\n/g, "");
            /* 把尺码渲染到confirm上 */
             mui.confirm(html,"编辑",["是","否"],function (a) {
                if (a.index==0) {
                    // 进行编辑
                    /* 点击是的时候，传递参数到后端，进行修改，返回值给我们 */
                    var data ={
                        id:obj.id,
                        size: $(".lt_size_S span.active").html(),
                        num: $(".mui-numbox-input").val()
                    }

                    /* 使用我们封装好的ajax传递参数 */
                    $.ltAjax({
                        url:"/cart/updateCart",
                        type:"post",
                        data:data,
                        success:function (result) {
                           /*  console.log(result); */
                            mui("#refreshContainer").pullRefresh().pulldownLoading();
                        }
                    })
                }
            }) 
          
             /* 控件的初始化 */
             mui(".mui-numbox").numbox()
            
        })

        /* 尺码单个的点击事件，获得高亮 */
        /* 因为mui-confrom同lt_container是同层级的
        我们是渲染到confrom上，所以我们委托父元素就是body */
        $("body").on("tap", ".lt_size_S span", function () {
            $(this).addClass("active").siblings().removeClass("active");
        })

        
    }


    /* 实现登录操作，使用之前封装好的ajax登录 */
    function queryCart(callback) {
        $.ltAjax({
            url: "/cart/queryCart",
            /* 默认是get请求，所以可以不需要写 */
            success: function (result) {
                callback && callback(result);
            }
        })
    }

    // 让template 插件 认识 我们自己定义的方法 
    // 让template提供了一个接口 让我们可以往里面注册方法
    // template.helper("在插件中使用的方法名","我们在js里面定义的方法")
    template.helper("objToJson", function (value) {
        return JSON.stringify(value);
    });

})